<template>
    <div>
        <Row :gutter="10">
            <Col>
                <Card>
                    <Row :gutter="10">
                        <div style="float:right;margin-bottom: 10px;">
                            <Input v-model="filter.phone" @on-search="search" search enter-button="查询" placeholder="请输入用户手机号"
                                   style="width:250px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                        </div>
                    </Row>
                    <Row class="margin-top-10 table_pattern">
                        <Table :columns="columns" :data="list"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                              :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="show_admin_notice" title="操作提示" width="400px" :mask-closable="false" @on-ok="adminOk">
            <p v-if="!cur_obj.is_admin">确认设置成为管理员?</p>
            <p v-if="cur_obj.is_admin">确认取消管理员身份?</p>
        </Modal>
        <Modal v-model="show_repair_notice" title="操作提示" width="400px" :mask-closable="false" @on-ok="repairOk">
            <p v-if="!cur_obj.is_repair">确认设置成为抢修队队员?</p>
            <p v-if="cur_obj.is_repair">确认取消抢修队队员身份?</p>
        </Modal>
        <Modal v-model="show_select_repair" title="选择抢修队" width="500px" :mask-closable="false" class="public_modal_header edit_modal">
          <div style="width: 100%;margin: 0 auto;padding: 50px;">
            <span style="margin-right: 11px;">选择抢修队</span>
            <Select v-model="repair_id" style="width: 300px;" placeholder="抢修队">
                <Option :value="item.id" v-for="(item, index) in repair_list">{{item.name}}</Option>
            </Select>
          </div>
          <div class="btns">
            <Button @click.stop="show_select_repair = false">取消</Button>
            <Button @click.stop="setRepairOk" type="primary" style="margin-left:15px;">确定</Button>
          </div>
        </Modal>
        <Modal v-model="show_form_type" title="表单推送配置" width="600px" :mask-closable="false" class="public_modal_header edit_modal">
          <Form :label-width="100">
              <FormItem label="选择表单" style="margin-left:20px; margin-top:20px">
                  <div class="auth_select">
                      <CheckboxGroup v-model="form_selected" @on-change="selectForm">
                          <Checkbox v-for="(item,key) in form_type_list" :key="key" :label="item.code" class="auth_check">
                               <span style="font-size: 14px;margin-left: 3px; color:#333">{{item.name}}</span>
                          </Checkbox>
                      </CheckboxGroup>
                  </div>
              </FormItem>
              <FormItem>
                  <Button type="primary" @click="setFormPushOk()" style="margin-left:170px; margin-bottom:20px">提交</Button>
              </FormItem>
          </Form>
        </Modal>
    </div>
</template>
<script>
    import config from '@/config'
    import { getUserList, changeUserIdentity, repairListForSelect, changeUserStatus, formTypeListForSelect, setAdminForm} from '@/api/main'
    export default {
        data() {
            return {
                columns: [
                    {
                        key: 'username',
                        title: '用户名',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.username)
                        },
                    },
                    {
                        key: 'phone',
                        title: '手机号',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.phone)
                        },
                    },
                    {
                        key: 'name',
                        title: '用户姓名',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.name)
                        },
                    },
                    {
                        key: 'is_admin',
                        title: '是否是管理员',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.is_admin ? '是' : '否')
                        },
                    },
                    {
                        key: 'is_repair',
                        title: '是否是抢修员',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.is_repair ? '是' : '否')
                        },
                    },
                    {
                        key: 'repair_name',
                        title: '所属抢修队',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.repair_name)
                        },
                    },
                    {
                        key: 'created_time',
                        title: '注册时间',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.created_time)
                        },
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                              h(
                                  'Button',
                                  {
                                      style: {
                                          marginBottom: '5px',
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF'
                                      },
                                      on: {
                                          click: () => {
                                            this.setAdmin(params.row)
                                          },
                                      },
                                  },
                                  params.row.is_admin ? '取消管理员身份' : '设置为管理员',
                              ),
                              h(
                                  'Button',
                                  {
                                      style: {
                                          marginBottom: '5px',
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF'
                                      },
                                      on: {
                                          click: () => {
                                            this.setRepair(params.row)
                                          },
                                      },
                                  },
                                  params.row.is_repair ? '取消抢修队队员身份' : '设置为抢修队队员',
                              ),
                              h(
                                    'Poptip',
                                    {
                                        props: {
                                            confirm: true,
                                            title: '您确定要删除该用户吗?',
                                            transfer: true,
                                        },
                                        on: {
                                            'on-ok': () => {
                                                let obj = {}
                                                obj.id = params.row.id
                                                obj.status = -1
                                                changeUserStatus(obj).then(res => {
                                                    if (res.code === 0) {
                                                      this.$Message.success('操作成功')
                                                      this.init()
                                                    } else {
                                                        this.$Message.error(res.text)
                                                    }
                                                })
                                            },
                                        },
                                    },
                                    [
                                        h(
                                            'Button',
                                            {
                                                style: {
                                                    border:0,
                                                    background:'transparent',
                                                    fontSize:'14px',
                                                    color:'#377EEF'
                                                },
                                                props: {
                                                    placement: 'top',
                                                    size: 'small',
                                                },
                                            },
                                            '删除',
                                        ),
                                    ],
                                ),
                                h(
                                    'Button',
                                    {
                                        style: {
                                            marginBottom: '5px',
                                            marginRight: '5px',
                                            border:0,
                                            background:'transparent',
                                            fontSize:'14px',
                                            color:'#377EEF',
                                            display: parseInt(params.row.is_admin) == 1 ? 'inline-block': 'none'
                                        },
                                        on: {
                                            click: () => {
                                              this.setFormPush(params.row)
                                            },
                                        },
                                    },
                                    '表单推送配置',
                                ),
                            ])
                        },
                    },
                ],
                pagenation: {},
                page: 0,
                list: [],
                repair_list: [],
                form_type_list: [],
                filter: {
                    page: 0,
                    phone: '',
                },
                repair_id: 0,
                cur_obj: {},
                show_admin_notice: false,
                show_repair_notice: false,
                show_select_repair: false,
                show_form_type: false,
                form_selected: [],
                form_select: [],
            }
        },
        methods: {
            change: function(page) {
                this.filter.page = page-1
                this.init()
            },
            search: function () {
                this.filter.page = 0
                this.init()
            },
            setAdmin(item) {
              this.cur_obj = item
              this.show_admin_notice = true
            },
            setRepair(item) {
              this.cur_obj = item
              if (!item.is_repair) {
                repairListForSelect().then(res => {
                  if (res.code == 0) {
                    this.repair_list = res.data
                  }
                })
              }
              this.show_repair_notice = true
            },
            adminOk() {
              let obj = {}
              obj.id = this.cur_obj.id
              obj.type = 1
              changeUserIdentity(obj).then(res => {
                if (res.code == 0) {
                  this.$Message.success('操作成功')
                  this.show_admin_notice = false
                  this.init()
                } else {
                  this.$Message.error(res.text)
                }
              })
            },
            repairOk() {
              if (this.cur_obj.is_repair) {
                let obj = {}
                obj.id = this.cur_obj.id
                obj.type = 2
                changeUserIdentity(obj).then(res => {
                  if (res.code == 0) {
                    this.$Message.success('操作成功')
                    this.show_repair_notice = false
                    this.init()
                  } else {
                    this.$Message.error(res.text)
                  }
                })
              } else {
                this.show_repair_notice = false
                this.show_select_repair = true
              }
            },
            setRepairOk() {
              if (!this.repair_id) {
                this.$Message.error('请先选择抢修队');return false;
              }
              let obj = {}
              obj.id = this.cur_obj.id
              obj.type = 2
              obj.repair_id = this.repair_id
              changeUserIdentity(obj).then(res => {
                if (res.code == 0) {
                  this.$Message.success('操作成功')
                  this.show_select_repair = false
                  this.init()
                } else {
                  this.$Message.error(res.text)
                }
              })
            },
            setFormPush(item) {
              this.item_id = item.id
              let obj = {}
              obj.level = 2
              formTypeListForSelect(obj).then(res => {
                this.form_type_list = res.data
                this.form_selected = item.form_selected
                this.show_form_type = true
              })
            },
            selectForm(data){
                this.form_selecte = data;
            },
            setFormPushOk() {
              let obj = {}
              obj.id = this.item_id
              obj.form_selected_ids = this.form_selecte.length ? this.form_selecte.join(',') : ''
              setAdminForm(obj).then(res => {
                if (res.code == 0) {
                  this.$Message.success('操作成功')
                  this.show_form_type = false
                  this.init()
                } else {
                    this.$Message.error(res.text)
                }
              })
            },
            init () {
                getUserList(this.filter).then(res => {
                    if (res.code == 0) {
                        this.list = res.data
                        this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation.totalPage = parseInt(res.totalPage)
                        this.pagenation.perPage = parseInt(res.perPage)
                    } else {
                        this.$Message.error(res.text)
                    }
                })
            }
        },
        mounted() {
            this.init()
        },
    }
</script>
